<template>
	<view>
		<view class="header-tip">提示：下面请填写的信息会在视频中体现，大数据匹配更准确！认真填写会大大提高生成的视频获得更好的本地流量</view>
		<view v-if="patientShop.id" class="copy-btn" @click="copyPatient">
			一键复制父账号关键词
		</view>
		<!-- 关键词start -->
		<view class="content">
			<view class="box">
				<view class="left">
					城市
				</view>
				<view class="right">
					<input v-model="form.chengshi" placeholder-style="color:#dedede" class="input" placeholder="如:佛山" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					具体地点
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.didian" placeholder="如:大沥" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					企业类型
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.mendianleixing"
						placeholder="如:软件公司" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					家乡
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.jiaxiang" placeholder="如:湖南" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					姓氏
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.xingshi" placeholder="如:石" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					从业年限
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.congyenianxian"
						placeholder="如:21年" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					行业
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.hangye" placeholder="如:获客软件" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					公司名
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.dianming"
						placeholder="如:欧宿科技" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					年龄段
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.nianlingduan"
						placeholder="如:80后" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					年龄
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.nianling"
						placeholder="如:36岁" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					产品
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.chanpin"
						placeholder="如:模剪系统" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					IP名
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.ipming" placeholder="如:老王" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					属相
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.shuxiang" placeholder="如:虎" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					做抖音时长
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.douyinshichang"
						placeholder="如:3年" />
				</view>
			</view>

			<view class="box">
				<view class="left">
					有几个分部
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.mendianshu"
						placeholder="如:1个" />
				</view>
			</view>
			<view class="box">
				<view class="left">
					<text style="font-size: 32rpx;">核心优势</text>
					<text style="font-size: 26rpx;color: #666;margin-left: 10rpx;">限14个字</text>
				</view>
				<view class="right">
					<input class="input" placeholder-style="color:#dedede" v-model="form.hexinyoushi"
						placeholder="如:1个" />
				</view>
			</view>
		</view>
		<!-- 关键词end -->

		<!-- 产品优势特点start~ -->
		<view class="content" style="margin-top: 50rpx;">
			<view class="title"
				style="display: flex; justify-content: space-around; align-items: center; height: 100rpx; line-height: 100rpx;">
				<view style="font-size: 40rpx; font-weight: bold; ">
					其他优势特点<text style="font-size: 25rpx; color: gray;">(注:限14个字)</text>
				</view>
				<view @click="addC"
					style="color: white; height: 60rpx; width: 130rpx; background-color: rgb(1, 152, 213); line-height: 60rpx; text-align: center; border-radius: 10rpx;">
					新增
				</view>
				<view @click="deleteC"
					style="color: white; height: 60rpx; width: 130rpx; background-color: rgb(1, 152, 213); line-height: 60rpx; text-align: center; border-radius: 10rpx;">
					删除
				</view>
			</view>
			<view class="box" v-for="(item,index) in youlist" :key="index">
				<view class="left">
					优势{{index+1}}
				</view>
				<view class="right" style="width: 450rpx;">
					<input class="input" v-model="item.text" placeholder-style="color:#dedede" maxlength="14"
						placeholder="如:傻瓜式剪辑有流量的视频" />
				</view>
			</view>
		</view>
		<!-- 产品优势特点end~ -->

		<!-- 促销广告语start -->
		<view class="content" style="margin-top: 50rpx;">
			<view class="title"
				style="display: flex; justify-content: space-around; align-items: center; height: 100rpx; line-height: 100rpx;">
				<view style="font-size: 40rpx; font-weight: bold; ">
					促销广告语<text style="font-size: 25rpx; color: gray;">(注:限14个字)</text>
				</view>
				<view @click="addA"
					style="color: white; height: 60rpx; width: 130rpx; background-color: rgb(1, 152, 213); line-height: 60rpx; text-align: center; border-radius: 10rpx;">
					新增
				</view>
				<view @click="deleteA"
					style="color: white; height: 60rpx; width: 130rpx; background-color: rgb(1, 152, 213); line-height: 60rpx; text-align: center; border-radius: 10rpx;">
					删除
				</view>
			</view>
			<view class="box" v-for="(item,index) in advertiseList" :key="index">
				<view class="left">
					广告语{{index+1}}
				</view>
				<view class="right" style="width: 450rpx;">
					<input class="input" v-model="item.text" placeholder-style="color:#dedede" maxlength="14"
						placeholder="如:关注我,免费领取试用版本" />
				</view>
			</view>
		</view>
		<!-- 促销广告语end -->




		<!-- 	<view style="white-space: pre;" class="wenan-content" v-for="(item,index) in textContentList">
			{{item.textContent}}
		</view> -->


		<view style="height: 70rpx;width: 100%;">

		</view>

		<!-- <view class="baokuan" v-if="textContent">
			<view class="left" @click="nextTextContent">换一批爆款文案</view>
			<view class="right" @click="enterText">确定使用爆款文案</view>
		</view> -->
		<view class="footer" @click="makeWenan">
			确定
		</view>
	</view>
</template>

<script>
	
	import Http from "@/utils/http"
	const http = new Http()
	const app = getApp()
	export default {
		data() {
			return {
				textContent: "",
				textContentList: [],
				chooseMusicList: [],
				patientShop:{},
				youlist: [{
					text: ''
				}],
				advertiseList: [{
					text: ''
				}],
				form: {
					category: '',
					tradeId: '',
					chengshi: "",
					didian: "",
					mendianleixing: "",
					jiaxiang: "",
					xingshi: "",
					congyenianxian: "",
					hangye: "",
					dianming: "",
					nianlingduan: "",
					nianling: "",
					chanpin: "",
					ipming: "",
					shuxiang: "",
					douyinshichang: "",
					hexinyoushi: "",
					mendianshu: "",
					yousi: "",
					advertise: '',
					yslist: [],
					gglist: []
				}
			}
		},
		async onLoad(option) {
			http.get("v1/system/createShop/getShopPatientUser").then(res=>{
				if(res.data.code == 200){
					this.patientShop = res.data.data
				}
			})
			this.form.category = option.type;
			this.form.tradeId = app.globalData.tradeId

			uni.showLoading({title:"加载中..."})
	   	   let res = await http.get("v1/mubanGuanjiazi/get")
		   if(res.data.data){
			   this.form = res.data.data;
			   this.form.category = option.type;
			   this.form.tradeId = app.globalData.tradeId
			   this.youlist =res.data.data.yslist? JSON.parse(res.data.data.yslist):[];
			   this.advertiseList = res.data.data.gglist?JSON.parse(res.data.data.gglist):[];
		   }
		   uni.hideLoading()
		   uni.showShareMenu({
		   withShareTicket: true
		   })
		},
		onShareAppMessage() {
			return {
				title: '模剪',
				path: '/pages/index/index',
				imageUrl: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/28/1711607371526eab2a6157c4d4f22b17e09b737128967.png' // 指定分享时显示的图片链接
			}
		},
		methods: {
			//复制父账号关键处
			async copyPatient(){
				if(this.patientShop){
					uni.showLoading({
						title:"数据加载中"
					})
					let res = await http.get("v1/mubanGuanjiazi/getPatient?patientId="+this.patientShop.userId)
					console.log("====",res);
					uni.hideLoading()
					var id = this.form.id
					if (res.data.data) {
						this.form = res.data.data;
						this.form.id = id
						// this.form.category = option.type;
						this.form.tradeId = app.globalData.tradeId
						this.youlist = res.data.data.yslist ? JSON.parse(res.data.data.yslist) : [];
						this.advertiseList = res.data.data.gglist ? JSON.parse(res.data.data.gglist) : [];
						
						console.log("+++++++》",this.form);
					}
					
				}else{
					uni.showToast({
						title:"暂无父账号",
						icon:"error"
					})
				}
				
			},
			deleteA() {
				this.advertiseList.pop();
			},
			deleteC() {
				this.youlist.pop();
			},
			addA() {
				let obj = {
					text: ''
				}
				this.advertiseList.push(obj);
			},
			addC() {
				let obj = {
					text: ''
				};
				this.youlist.push(obj);
			},
			enterText() {
				var pages = getCurrentPages()
				let prePage = pages[pages.length - 2];
				prePage.$vm._data.form.content = this.textContent;
				prePage.$vm._data.form.audioList = this.chooseMusicList;
				uni.navigateBack({
					delta: 1
				})
			},
			makeWenan() {
				console.log(this.youlist);
				this.form.yousi = this.youlist.length > 0 ? this.youlist[Math.floor(Math.random() * this.youlist.length)]
					.text : "";
				this.form.advertise = this.advertiseList.length > 0 ? this.advertiseList[Math.floor(Math.random() * this
					.advertiseList.length)].text : "";

				this.form.yslist = this.youlist.length < 1 ? "" : JSON.stringify(this.youlist);
				this.form.advertiseList = this.advertiseList.length < 1 ? "" : JSON.stringify(this.advertiseList);
				this.form.gglist = this.advertiseList.length < 1 ? "" : JSON.stringify(this.advertiseList);

				for (const key in this.form) {
					if (this.form.hasOwnProperty(key)) {
						if (key == 'createTime' ||key == 'id' || key == 'deleteTime' || key == 'updateTime' || key == 'userId' || key ==
							'category' || key == 'tradeId') {
							continue;
						} else {
							if (!this.form[key]) {
								console.log(`${key}`);
								uni.showToast({
									title: '请检查每项是否输入完毕',
									icon: 'none'
								})
								return false;
							}
						}
					}
				}
				http.post("v1/mubanGuanjiazi/create", this.form).then(res => {
					console.log("====>", res.data);
					uni.showToast({
						title: "确定成功"
					})
					if(res.data.msg == ""){
						return false;
					}
					this.textContentList = res.data.data.slice(0,3);
					let dataList = res.data.data;
					let randomIndex = Math.floor(Math.random() * dataList.length);
					this.textContent = dataList[randomIndex].textContent;
					let line = this.textContent.split('\n')
					prePage.$vm._data.form.contentList = line;
					console.log("===>输出~~",line);
					let classes = dataList[randomIndex].classes;
					http.get('v1/music/categoryById/' + classes).then(res => {
						if (res.data.data == undefined) {
							uni.showToast({
								title: '请重新点击生成文案',
								icon: 'none'
							})
							return false;
						}
						let obj = res.data.data;
						console.log(obj);
						this.chooseMusicList.push({
							"id": obj.id,
							"mediaURL": 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' + obj
								.musicPath
						})

						var pages = getCurrentPages()
						let prePage = pages[pages.length - 2];
						prePage.$vm._data.form.content = this.textContent;
						prePage.$vm._data.form.audioList = this.chooseMusicList;

					})
				})
			},
			//换下一批文案
			// nextTextContent(){
			// 	let obj = {
			// 		category:this.form.category,
			// 		tradeId:app.globalData.tradeId
			// 	}
			// 	obj.yousi =this.youlist.length>0? this.youlist[Math.floor(Math.random() * this.youlist.length)].text:"";
			// 	obj.advertise = this.advertiseList.length>0?this.advertiseList[Math.floor(Math.random() * this.advertiseList.length)].text:"";

			// 	http.post("v1/mubanGuanjiazi/nextTextContent",obj).then(res=>{
			// 		this.textContentList = res.data.data.slice(0,3);
			// 		let dataList = res.data.data;
			// 		let randomIndex = Math.floor(Math.random() * dataList.length);
			// 		this.textContent = dataList[randomIndex].textContent;
			// 		let classes = dataList[randomIndex].classes;
			// 		http.get('v1/music/categoryById/'+classes).then(res=>{
			// 			let obj = res.data.data;
			// 			this.chooseMusicList.push({
			// 				"id":obj.id,
			// 				"mediaURL":'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/'+obj.musicPath
			// 			})
			// 		})
			// 	})
			// }
		}
	}
</script>

<style scoped lang="scss">
	.header-tip {
		font-size: 28rpx;
		color: red;
		margin: 30rpx;

	}

	.content {
		margin: 30rpx;
		background: #fff;

		.box {
			margin: 0 30rpx;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f1f1f1;
			display: flex;
			justify-content: space-between;

			.left {
				font-size: 34rpx;
				color: black;
			}

			.right {
				width: 300rpx;
				font-size: 36rpx;
				color: #333;

				.input {
					width: 100%;

				}
			}
		}
	}

	.footer {
		position: fixed;
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		z-index: 99;
		bottom: 20rpx;
		right: 0;
		left: 5%;
		background: #00008B;
		font-size: 32rpx;
		text-align: center;
		font-weight: 700;
		color: #fff;
	}

	.input {
		width: 300rpx;
		font-size: 32rpx;
		text-align: right
	}

	.baokuan {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		background: #fff;
		padding: 0 30rpx;

		.left {
			height: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			width: 43%;
			text-align: center;
			line-height: 80rpx;
			background: #eee;
			border-radius: 30rpx;
		}

		.right {
			height: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			width: 43%;
			text-align: center;
			line-height: 80rpx;
			background: #00008B;
			border-radius: 30rpx;
			color: #fff;
		}
	}

	.wenan-content {
		margin: 20rpx;
		background: #fff;
		padding: 20rpx;
	}

	.copy-btn {
		width: 380rpx;
		height: 70rpx;
		background: #00008B;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 12rpx;
		margin: 0 auto;
	}
</style>